<template>
	<view class="content">
		<view class="section-1">
			<view class="section-body">
				<view class="list">
					<view class="title">
						{{ dw_name }}
					</view>
					<view class="time">
						{{ date }}
					</view>
					<view class="item" v-for="(item, index) in list" :key="index">
						<view class="parent">
							<view class="name">{{ item.type }}</view>
						</view>
						<view class="count" v-for="item2 in item" v-show="item2.content != null">
							<view class="contents">{{ item2.content }}</view>
							<view v-if="item2.zrr_name !=null ">责任人：{{ item2.zrr_name }}</view>
							<view v-if="item2.kf_point !=null ">扣分：{{ item2.kf_point }}</view>
							<view v-if="item2.kf_reason !=null ">描述：{{ item2.kf_reason }}</view>
							<view v-if="item2.level !=null ">违章等级：{{ item2.level }}</view>
							<view v-if="item2.supervisor_time !=null ">
								违章日期：{{ item2.supervisor_time.substring(0, 10)   }}</view>
							<view v-if="item2.supervisor !=null ">违章来源：{{ item2.supervisor  }}</view>
							<view v-if="item2.project_name !=null ">违章项目：{{ item2.project_name }}</view>
							<view v-if="item2.file_path !=null " class="Photo">
								<text class="photos">
									照片：
								</text>
								<text class="images">
									<text v-for="(item3,index) in item2.imgs" :key="index">
										<img :src="item3" alt="" @click='onClick(index,item2.imgs)'>
									</text>
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		projectTeamGetCommentList
	} from '@/api/statistics.js'
	export default {
		data() {
			return {
				dw_name: '',
				date: '',
				project_id: '',
				type: '',
				company_id: '',
				list: [],

			}
		},
		methods: {
			fetchData() {
				if(this.type == '劳务分包' || this.type == '专业分包'){
					this.type = '施工单位'
				}
				projectTeamGetCommentList({
					project_id: this.project_id,
					type: this.type,
					company_id: this.company_id,
					date: this.date
				}).then(res => {
					this.list = res.data.data
					this.list.map(item => {
						for (var k in item) {
							if (item[k].file_path) {
								item[k].imgs = item[k].file_path.split(',')
							}
						}
					})
				})
			},
			onClick(index, item) {
				//预览图片
				uni.previewImage({
					current: index,
					urls: item,
					indicator: 'number',
					loop: true,
				})
			},
		},
		created() {
			this.fetchData()
		},
		onLoad(data) {
			const params = JSON.parse(data.params)
			this.dw_name = params.dw_name
			this.date = params.date
			this.project_id = params.project_id
			this.type = params.type
			this.company_id = params.company_id
		}
	}
</script>

<style lang="scss" scoped>
	.section-1 {
		width: 100%;
		background-color: #2e5efe;

		.section-body {
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;
			width: 100vw;
			background-color: #fff;
			overflow: hidden;

			.list {
				width: 670rpx;
				box-sizing: border-box;
				margin-left: 40rpx;
				margin-top: 60rpx;
				margin-bottom: 60rpx;

				.title {
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.time {
					text-align: center;
					font-size: 26rpx;
					color: #8c96a4;
				}

				.item {
					margin-top: 40rpx;
					webkit-box-shadow: 0px 0px 10px #cccccc;
					moz-box-shadow: 0px 0px 10px #cccccc;
					box-shadow: 0px 0px 10px #cccccc;
					padding: 30rpx;
					border-radius: 30rpx;

					.parent {
						width: 100%;
						display: flex;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #f9f5f8;
						@include clear();

						.name {
							width: 400rpx;
							font-size: 30rpx;
							font-weight: bold;
							color: #3b3c40;
						}

						.desc {
							font-size: 15px;
							font-weight: bold;
							color: #3b3c40;
							margin-left: 100rpx;
						}
					}

					.count {
						font-size: 26rpx;
						padding-bottom: 10px;
						border-bottom: 0.5px solid #f9f5f8;

						.contents {
							font-size: 30rpx;
						}

						view {
							margin: 20rpx 0;
						}

						.Photo {
							display: flex;

							.photos {
								font-size: 26rpx;
								width: 75rpx;
							}

							.images {
								display: flex;
								flex-wrap: wrap;
								flex: 1;

								img {
									width: 150rpx;
									height: 150rpx;
									margin-right: 20rpx;
									margin-bottom: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
